import {EditorEvents} from "@tiptap/core";
import {AiEditorOptions, InnerEditor} from "../../core/AiEditor.ts";
import {AbstractMenuButton} from "../AbstractMenuButton.ts";
import tippy, {Instance} from "tippy.js";


const defaultEmojis = ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '🥲', '😋', '😛', '😜', '🤪', '😝'
    , '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑', '😶', '😶‍🌫', '😏', '😒', '🙄', '😬', '😮‍💨', '🤥', '😌', '😔', '😪', '🤤', '😴', '😷'
    , '🤒', '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵', '😵‍💫', '🤯', '🤠', '🥳', '🥸', '😎', '🤓', '🧐', '😕', '😟', '🙁', '😮', '😲', '😳'
    , '🥺', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖', '😣', '😞', '😓', '😩', '😫', '🥱', '😤', '😡', '😠', '🤬', '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺'
    , '👻', '👽', '👾', '🤖', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾', '👍', '👎', '🙏', '🙈', '🙉', '🙊', '💌', '💘', '💝', '💖', '💗', '💓', '💞', '💕', '💟', '❣️', '💔'
    , '💋', '💯', '💢', '💥', '💫', '💦', '💨', '💤'];


export class Emoji extends AbstractMenuButton {


    emojis: string[] = defaultEmojis
    tippy?: Instance;


    constructor() {
        super();
        this.template = `
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM8 13H16C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13ZM8 11C7.17157 11 6.5 10.3284 6.5 9.5C6.5 8.67157 7.17157 8 8 8C8.82843 8 9.5 8.67157 9.5 9.5C9.5 10.3284 8.82843 11 8 11ZM16 11C15.1716 11 14.5 10.3284 14.5 9.5C14.5 8.67157 15.1716 8 16 8C16.8284 8 17.5 8.67157 17.5 9.5C17.5 10.3284 16.8284 11 16 11Z"></path></svg>
        </div>
        `;
    }

    onCreate(props: EditorEvents["create"], options: AiEditorOptions) {
        super.onCreate(props, options);
        this.emojis = options.emoji?.values || defaultEmojis;
    }

    connectedCallback() {
        super.connectedCallback();

        this.tippy = tippy(this.querySelector("svg")!, {
            content: this.createMenuElement(),
            appendTo: this.closest(".aie-container")!,
            placement: 'bottom',
            trigger: 'click',
            interactive: true,
            arrow: false,
        })
    }


    createMenuElement() {
        const div = document.createElement("div");
        div.style.maxWidth = "450px"
        div.style.overflow = "hidden"
        div.style.display = "flex"
        div.style.justifyContent = "center"

        const size = this.getSize();

        div.classList.add("aie-dropdown-container")
        div.innerHTML = `
            <div class="emoji-cells">
            ${this.emojis.map((emoji) => {
            return `<div  class="emoji-cell" style="width: ${size}px;height: ${size}px;font-size: ${size-2}px;"><span>${emoji}</span></div>`;
        }).join('')}
            </div>
        `;

        div.querySelector(".emoji-cells")!.addEventListener("click", (e) => {
            const target: HTMLDivElement = (e.target as any).closest('.emoji-cell');
            if (target) {
                this.editor?.commands.insertContent(target.querySelector("span")!.innerHTML)
                this.tippy?.hide()
            }
        });

        return div;
    }

    getSize() {
        const options = (this.editor as InnerEditor).aiEditor.options;
        if (options.toolbarSize === "large") {
            return 30
        } else if (options.toolbarSize === "medium") {
            return 25
        } else return 20
    }
}


